<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">报告</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div>
            <div class="test">
              <el-card class="box-card">
                <div class="card-content">
                  <div class="card-img">
                    <img src="../assets/img/desktop/gm.png"/>
                  </div>
                  <div class="card-info">
                    <p>理财规(亿元)</p>
                    <p>2458.76</p>
                    <p><i class="el-icon-caret-top" style="color: #dc858d;"></i><span style="color: #dc858d !important;">2.34%</span>同比去年</p>
                  </div>
                </div>
              </el-card>

              <el-card  class="box-card">
                <div class="card-content">
                  <div class="card-img">
                    <img src="../assets/img/desktop/lc.png"/>
                  </div>
                  <div class="card-info">
                    <p>理财产品(只)</p>
                    <p>3650</p>
                    <p><i class="el-icon-caret-bottom"></i><span>1.34%</span>同比去年</p>
                  </div>
                </div>
              </el-card>

              <el-card class="box-card">
                <div class="card-content">
                  <div class="card-img">
                    <img src="../assets/img/desktop/xz.png"/>
                  </div>
                  <div class="card-info">
                    <p>本年新增产品数</p>
                    <p>1760</p>
                    <p><i class="el-icon-caret-bottom"></i><span>5.12%</span>同比去年</p>
                  </div>
                </div>
              </el-card>

              <el-card class="box-card">
                <div class="card-content">
                  <div class="card-img">
                    <img src="../assets/img/desktop/ll.png"/>
                  </div>
                  <div class="card-info">
                    <p>产品平均收益率(%)</p>
                    <p>3.27%</p>
                    <p><i class="el-icon-caret-top" style="color: #dc858d;"></i><span style="color: #dc858d !important;">1.83%</span>同比去年</p>
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
    export default {
        name: "test",
        data(){
          return{
            showCard:[],
            shoeMenu:[],
          }
        },
      mounted: function() {


      },
        methods:{
          setShow(num,menuid){
            num=num+''
            let a=false
            this.showCard.map((item)=>{
              if(item==num){
                a=true
              }
            })
            if(!a){
              return false
            }
            let b=false
            if(this.shoeMenu.children){
              this.shoeMenu.children.map((item)=>{
                if(item.menuid==menuid)
                  b=true
              })
            }
            return b
          },
        }
    }
</script>

<style lang="scss" scoped>
  .sn-container {
    left: 50px;
    top: 110px;
    width: 530px;
    height: 550px;
    .chartsdom {
      width: 100%;
      height: 100%;
    }
  }
  /deep/.test{
    width: 100%;
    position: absolute;
    left: 15px;
    top: 20px;
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    margin-bottom: 20px;
  .el-card{
    height: 115px;
    width: 235px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-top: 50px;
    background-color:transparent;
    border-radius: 4px;
    overflow: hidden;

  /deep/.el-card__body{
    padding: 0 !important;
    height: 115px;
  }
  .card-content{
    border: 1px #00f6ff solid !important;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  .card-img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: auto 0px;
  img{
    width: 100%
  }
  }
  .card-info{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 80px;
    margin-left:15px;
  p{
    margin: 0px;
    padding: 0px;
    color: #00c2ff;
  i{
    margin-top:0px;
    color: #2abaab;
  }
  span{
    margin: 0px 5px;
    color: #2abaab !important;
    font-size: 16px;
  }
  }
  :nth-child(1){
    font-size: 16px;
  }
  :nth-child(2){
    font-size: 24px;
  }
  :last-child{
    font-size: 16px;
    color: #ffffff;
  }
  }
  }
  }
  }
</style>
